<template>
  <div class="wrapper w-full h-full flex flex-row gap-5 ">
    <el-card class="left w-1/4 h-full">
      <HeaderTitle class="h-12" :eventFn="delChosen" title="模型列表" btnType="danger" :btn="true" btnText="删除" />
      <section class="forms flex flex-row items-center gap-2 justify-center">
        <el-select v-model="searches.project" placeholder="请选择项目" clearable filterable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="searches.type" placeholder="请选择类型" clearable filterable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="searches.search" placeholder="请输入" clearable filterable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </section>
      <el-table cell :current-change="handleCurrentChange" highlight-current-row :header-cell-style="{}"
        :data="modelData" class="!w-[99%] mt-3" height="700">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column width="110" label="项目名称" prop="projectName" />
        <el-table-column width="110" label="模型名称" prop="modelName" />
        <el-table-column width="120" prop="type" label="模型类型" />
      </el-table>
    </el-card>
    <div class="right flex-1 h-full flex flex-col">
      <div class="tabs flex-1 w-full p-3">
        <el-tabs class="w-full h-full" v-model="activeName">
          <el-tab-pane class="w-full h-full modelpane relative" label="模型信息" name="0">
            <el-descriptions :column="2" class="w-full h-full ">
              <el-descriptions-item :span="index > 7 ? 2 : 1" v-for="(key, index) in Object.keys(modelInfo)" :key="key"
                :label="ModelInfoEnum[key] + '：'">{{
                  modelInfo[key] }}</el-descriptions-item>
            </el-descriptions>
            <el-button type="default" class="!text-blue !absolute left-[93%] top-2">编辑</el-button>
          </el-tab-pane>
          <el-tab-pane class="w-full h-full runpane" label="训练参数" name="1">
            <div class="extraTitle"></div>
            <el-descriptions :class="`h-1/${Object.keys(training_config).length}`" :column="4"
              v-for="key in Object.keys(training_config)" :key="key">
              <el-descriptions-item v-for="c2key in Object.keys(training_config[key]) " :key="c2key"
                :label="TrainingConfigEnum[c2key] + '：'">{{ training_config[key][c2key] }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="actions w-full h-[30%] flex flex-row gap-4">
        <el-card class="export h-full w-1/2 ">
          <template #header>
            <HeaderTitle class="h-2" title="模型导出" />
          </template>
          <div class="flex justify-center items-center gap-8 mt-6">
            <div class="item flex flex-col items-center justify-center cursor-pointer gap-3">
              <img src="/public/asset-export-import.svg" />
              <!-- <span class="iconify color-[#6c6c6c] text-xl" data-icon="mdi:vector-rectangle"></span> -->
              <span class="suffix">.ONNX格式</span>
            </div>
            <div class="item flex flex-col items-center justify-center cursor-pointer gap-3">
              <img src="/public/asset-export-import.svg" />
              <span class="suffix">.WTS格式</span>
            </div>
          </div>
        </el-card>
        <el-card class="action flex-1 ">
          <template #header>
            <HeaderTitle class="h-2" title="模型操作" />
          </template>
          <div class="action flex-1 flex flex-col justify-center items-center gap-3">
            <div class="train flex items-center justify-center" @click="toggleToTrain">
              <span class="trainTxt">再训练</span>
            </div>
            <div class="train flex items-center justify-center" @click="toggleToAssess">
              <span class="trainTxt">评估详情</span>
            </div>
            <div class="train flex items-center justify-center" @click="void (0)">
              <span class="trainTxt">推理</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ModelInfoEnum, TrainingConfigEnum, modelInfo, training_config } from './test'
import { HeaderTitle } from '@/components/a-headerTitle/index'

let router = useRouter()

const activeName = ref('0')

const searches = reactive({
  project: '',
  type: '',
  search: ''
})

const modelData = ref([
  {
    projectName: 'test',
    modelName: 'test',
    type: 'test'
  },
])
const options = ref([
  {
    label: '',
    value: ''
  },
])
const handleCurrentChange = () => {

}
const toggleToTrain = () => {
  router.push({ name: 'runIndex' })
}

const toggleToAssess = () => {
  router.push({ name: 'assessIndex' })
}
const delChosen = () => { }

</script>

<style lang="scss" scoped>
.suffix {
  height: 28px;
  line-height: 28px;
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-bold;
}

.modelpane {
  :deep(.el-descriptions__body) {
    .el-descriptions__table {
      height: 68% !important;

      & tr:last-of-type {
        td>span:last-of-type {
          display: inline-block;
          width: 650px;
          height: 122px;
          line-height: 20px;
          border-radius: 5px;
          background-color: rgba(239, 239, 239, 1);
          color: rgba(136, 136, 136, 1);
          font-size: 14px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
      }
    }
  }
}

.runpane {
  :deep(.el-descriptions__body) {
    .el-descriptions__table {
      background-color: rgba(239, 239, 239, 1) !important;
      height: 98% !important;
    }
  }
}

:deep() {
  .el-tabs__content {
    box-shadow: 1px 3px 5px 2px rgba(154, 154, 154, 0.4);
    padding: 2px;
  }

  .el-descriptions__body {
    height: 100%;
    padding: 20px;
  }
}

.train {
  width: 32%;
  height: 38px;
  background: url('/public/bg-trainBtn.png') no-repeat center center;
  background-size: cover;
  cursor: pointer;

  .trainTxt {
    background: rgba(255, 140, 25, 0.15);
    border: 1px solid rgb(255, 140, 25, 0.2);
    border-radius: 15px;
    height: 70%;
    width: 70%;
    font-size: 21px;
    color: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
